<!--<template>-->
<!--&lt;!&ndash;  <template v-if="user">&ndash;&gt;-->

<!--&lt;!&ndash;    <van-cell title="当前用户" :value="user?.username"/>&ndash;&gt;-->
<!--&lt;!&ndash;    <van-cell title="修改信息" is-link to="/user/update"/>&ndash;&gt;-->
<!--&lt;!&ndash;    <van-cell title="我创建的队伍" is-link to="/user/team/create"/>&ndash;&gt;-->
<!--&lt;!&ndash;    <van-cell title="我加入的队伍" is-link to="/user/team/join"/>&ndash;&gt;-->
<!--&lt;!&ndash;  </template>&ndash;&gt;-->

<!--  <van-sticky>-->
<!--    <van-nav-bar-->
<!--        :title="title"-->
<!--        left-arrow-->
<!--        @click-left="onClickLeft"-->
<!--        @click-right="showUserDetail(userId)"-->
<!--    >-->
<!--      <template #right>-->
<!--        <van-icon class-prefix="my-icon" name="qita" color="#39a9ed"/>-->
<!--      </template>-->
<!--    </van-nav-bar>-->
<!--  </van-sticky>-->
<!--  <template #button>-->
<!--    <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>-->
<!--  </template>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import {useRouter} from "vue-router";-->
<!--import {onMounted,ref} from "vue";-->
<!--import myAxios from "../plugins/myAxios";-->
<!--import {Toast} from "vant";-->
<!--import {getCurrentUser} from "../services/user";-->
<!--const user=ref();-->
<!--const router=useRouter();-->


<!--// onMounted(async () => {-->
<!--//     user.value=await getCurrentUser();-->
<!--// });-->



<!--</script>-->

<!--<style scoped>-->

<!--</style>-->








<!--<template>-->
<!--  <van-sticky>-->
<!--    <van-nav-bar-->
<!--        :title="title"-->
<!--        left-arrow-->
<!--        @click-left="onClickLeft"-->
<!--        @click-right="showUserDetail(userId)"-->
<!--    >-->
<!--&lt;!&ndash;      <template #right>&ndash;&gt;-->
<!--&lt;!&ndash;        <van-icon class-prefix="my-icon" name="qita" color="#39a9ed"/>&ndash;&gt;-->
<!--&lt;!&ndash;      </template>&ndash;&gt;-->
<!--    </van-nav-bar>-->
<!--  </van-sticky>-->

<!--  <div class="chat-container">-->
<!--    <div class="content" ref="chatRoom" v-html="stats.content"></div>-->
<!--&lt;!&ndash;    <van-cell-group inset style="position: fixed; bottom: 0; width: 100%">&ndash;&gt;-->
<!--&lt;!&ndash;      <van-field&ndash;&gt;-->
<!--&lt;!&ndash;          v-model="stats.text"&ndash;&gt;-->
<!--&lt;!&ndash;          center&ndash;&gt;-->
<!--&lt;!&ndash;          clearable&ndash;&gt;-->
<!--&lt;!&ndash;          placeholder="聊点什么吧...."&ndash;&gt;-->
<!--&lt;!&ndash;      >&ndash;&gt;-->
<!--&lt;!&ndash;        <template #button>&ndash;&gt;-->
<!--&lt;!&ndash;          <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--&lt;!&ndash;      </van-field>&ndash;&gt;-->
<!--&lt;!&ndash;    </van-cell-group>&ndash;&gt;-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { useRouter } from "vue-router";-->
<!--import { onMounted, ref } from "vue";-->
<!--import myAxios from "../plugins/myAxios";-->
<!--import { Toast } from "vant";-->
<!--import { getCurrentUser } from "../services/user";-->

<!--const user = ref();-->
<!--const router = useRouter();-->
<!--// const title = ref('私聊空间');-->
<!--const DEFAULT_TITLE = "聊天"-->
<!--const title = ref(DEFAULT_TITLE)-->
<!--const stats = ref({ content: '', text: '' });-->
<!--const userId = ref(''); // 假设你有用户ID-->

<!--onMounted(async () => {-->
<!--  user.value = await getCurrentUser();-->
<!--});-->

<!--const onClickLeft = () => {-->
<!--  router.push("/");-->
<!--};-->

<!--// const showUserDetail = (id) => {-->
<!--//   router.push({-->
<!--//     path: "/user/detail",-->
<!--//     query: {-->
<!--//       id: id-->
<!--//     }-->
<!--//   });-->
<!--// };-->

<!--const send = () => {-->
<!--  // 发送消息的逻辑-->
<!--  Toast.success('消息已发送');-->
<!--  stats.value.content += `<p>${stats.value.text}</p>`;-->
<!--  stats.value.text = '';-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.chat-container {-->
<!--  height: 100vh;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--}-->

<!--.content {-->
<!--  flex: 1;-->
<!--  overflow-y: auto;-->
<!--  padding: 16px;-->
<!--}-->
<!--</style>-->







<!--<template>-->
<!--  <div id="messagePage">-->
<!--    <van-grid :border="false">-->
<!--      <van-grid-item icon="comment" icon-color="#767ffe" text="评论" to="/user/comment"/>-->
<!--      <van-grid-item v-if="likeNum===0" icon="good-job" icon-color="#639efc" text="赞" to="/user/like"/>-->
<!--      <van-grid-item v-else icon="good-job" icon-color="#639efc" text="赞" :badge="likeNum" to="/user/like"/>-->
<!--      <van-grid-item icon="like" icon-color="#ff7a19" text="关注" to="/user/follow"/>-->
<!--      <van-grid-item icon="friends" icon-color="#d94dff"  to="/fans" text="粉丝"/>-->
<!--    </van-grid>-->
<!--  </div>-->
<!--</template>-->







<!--<template>-->
<!--&lt;!&ndash;  <van-cell-group inset style="position: fixed;bottom: 0;width: 100%">&ndash;&gt;-->
<!--&lt;!&ndash;    <van-field&ndash;&gt;-->
<!--&lt;!&ndash;        v-model="stats.text"&ndash;&gt;-->
<!--&lt;!&ndash;        center&ndash;&gt;-->
<!--&lt;!&ndash;        clearable&ndash;&gt;-->
<!--&lt;!&ndash;        placeholder="聊点什么吧...."&ndash;&gt;-->
<!--&lt;!&ndash;    >&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;      <template #button>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;        <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;      </template>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;    </van-field>&ndash;&gt;-->
<!--&lt;!&ndash;  </van-cell-group>&ndash;&gt;-->
<!--  <div class="chat-container">-->
<!--    <div class="content" ref="chatRoom" v-html="stats.content"></div>-->
<!--    <van-cell-group inset class="input-area">-->
<!--      <van-field-->
<!--          v-model="stats.text"-->
<!--          center-->
<!--          clearable-->
<!--          placeholder="聊点什么吧...."-->
<!--      >-->
<!--        <template #button>-->
<!--          <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
<!--    </van-cell-group>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { useRoute,useRouter } from "vue-router";-->
<!--import { onMounted, ref } from "vue";-->
<!--import myAxios from "../plugins/myAxios";-->
<!--import { Toast } from "vant";-->
<!--import {getCurrentUser} from "../services/user";-->

<!--const user = ref();-->
<!--const router = useRouter();-->
<!--// const title = ref('私聊空间');-->
<!--const DEFAULT_TITLE = "聊天"-->
<!--const title = ref(DEFAULT_TITLE)-->
<!--const stats = ref({ content: '', text: '' });-->
<!--const userId = ref(''); // 假设你有用户ID-->

<!--onMounted(async () => {-->
<!--  user.value = await getCurrentUser();-->
<!--});-->

<!--const onClickLeft = () => {-->
<!--  router.push("/");-->
<!--};-->

<!--// const showUserDetail = (id) => {-->
<!--//   router.push({-->
<!--//     path: "/user/detail",-->
<!--//     query: {-->
<!--//       id: id-->
<!--//     }-->
<!--//   });-->
<!--// };-->

<!--const send = () => {-->
<!--  // 发送消息的逻辑-->
<!--  Toast.success('消息已发送');-->
<!--  stats.value.content += `<p>${stats.value.text}</p>`;-->
<!--  stats.value.text = '';-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->

<!--/*.chat-container {*/-->
<!--/*  display: flex;*/-->
<!--/*  flex-direction: column;*/-->
<!--/*  width: 100%;*/-->
<!--/*  height: 100%;*/-->
<!--/*  overflow-y: auto;*/-->
<!--/*}*/-->

<!--/*.content {*/-->
<!--/*  flex: 1;*/-->
<!--/*  overflow-y: auto;*/-->
<!--/*  padding: 16px;*/-->
<!--/*}*/-->
<!--.chat-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100vh; /* 使聊天容器占据整个视口高度 */-->
<!--}-->

<!--.content {-->
<!--  flex: 1;-->
<!--  overflow-y: auto; /* 确保聊天内容可以滚动 */-->
<!--  padding: 10px;-->
<!--  background-color: #f0f0f0; /* 背景色可选 */-->
<!--}-->

<!--.input-area {-->
<!--  position: fixed;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  background-color: #fff; /* 输入框背景色 */-->
<!--  z-index: 10; /* 确保输入框在最上方 */-->
<!--}-->
<!--</style>-->






<!--<template>-->
<!--  <div class="chat-container">-->
<!--    <div class="content" ref="chatRoom" v-html="stats.content"></div>-->
<!--    <van-cell-group inset class="input-area">-->
<!--      <van-field-->
<!--          v-model="stats.text"-->
<!--          center-->
<!--          clearable-->
<!--          placeholder="聊点什么吧...."-->
<!--      >-->
<!--        <template #button>-->
<!--          <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
<!--    </van-cell-group>-->
<!--  </div>-->
<!--</template>-->



<!--<template>-->
<!--  <van-sticky>-->
<!--    <van-nav-bar-->
<!--        :title="title"-->
<!--        left-arrow-->
<!--        @click-left="onClickLeft"-->
<!--    >-->
<!--      <template #right>-->
<!--        <van-icon class-prefix="my-icon" name="qita" color="#39a9ed"/>-->
<!--      </template>-->
<!--    </van-nav-bar>-->
<!--  </van-sticky>-->
<!--  <div class="chat-container">-->
<!--    <div class="content" ref="chatRoom" v-html="stats.content"></div>-->
<!--    <van-cell-group inset class="input-area">-->
<!--      <van-field-->
<!--          v-model="stats.text"-->
<!--          center-->
<!--          clearable-->
<!--          placeholder="聊点什么吧...."-->
<!--      >-->
<!--        <template #button>-->
<!--          <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>-->
<!--        </template>-->
<!--      </van-field>-->
<!--    </van-cell-group>-->
<!--  </div>-->
<!--</template>-->
<!--<script setup lang="ts">-->
<!--import { useRoute, useRouter } from "vue-router";-->
<!--import { onMounted, ref } from "vue";-->
<!--import myAxios from "../plugins/myAxios";-->
<!--import { Toast } from "vant";-->
<!--import { getCurrentUser } from "../services/user";-->

<!--const user = ref();-->
<!--const router = useRouter();-->
<!--const DEFAULT_TITLE = "聊天";-->
<!--const title = ref(DEFAULT_TITLE);-->
<!--const stats = ref({ content: '', text: '' });-->
<!--const userId = ref(''); // 假设你有用户ID-->

<!--onMounted(async () => {-->
<!--  user.value = await getCurrentUser();-->
<!--});-->

<!--const onClickLeft = () => {-->
<!--  router.push("/");-->
<!--};-->

<!--const send = () => {-->
<!--  // 发送消息的逻辑-->
<!--  Toast.success('消息已发送');-->
<!--  stats.value.content += `<p>${stats.value.text}</p>`;-->
<!--  stats.value.text = '';-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.chat-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  height: 100vh; /* 使聊天容器占据整个视口高度 */-->
<!--  background-color: #f5f5f5; /* 背景颜色 */-->
<!--}-->

<!--.content {-->
<!--  flex: 1;-->
<!--  overflow-y: auto; /* 确保聊天内容可以滚动 */-->
<!--  padding: 16px;-->
<!--  background-color: #f5f5f5; /* 背景色 */-->
<!--  border-top-left-radius: 8px;-->
<!--  border-top-right-radius: 8px;-->
<!--  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--}-->

<!--.content p {-->
<!--  margin: 8px 0;-->
<!--  padding: 8px;-->
<!--  background-color: #fff;-->
<!--  border-radius: 8px;-->
<!--  max-width: 70%; /* 控制消息宽度 */-->
<!--  word-break: break-word;-->
<!--}-->

<!--.content p.user-message {-->
<!--  background-color: #dcf8c6; /* 用户消息背景色 */-->
<!--  align-self: flex-end; /* 用户消息靠右对齐 */-->
<!--}-->

<!--.input-area {-->
<!--  position: fixed;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  background-color: #fff; /* 输入框背景色 */-->
<!--  z-index: 10; /* 确保输入框在最上方 */-->
<!--  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */-->
<!--  border-top-left-radius: 8px;-->
<!--  border-top-right-radius: 8px;-->
<!--}-->

<!--.van-field__control {-->
<!--  padding: 8px;-->
<!--  border-radius: 8px;-->
<!--  background-color: #f5f5f5;-->
<!--  color: #333;-->
<!--  font-size: 16px;-->
<!--}-->

<!--.van-button&#45;&#45;primary {-->
<!--  background-color: #1989fa;-->
<!--  border-color: #1989fa;-->
<!--  color: #fff;-->
<!--  border-radius: 8px;-->
<!--  font-size: 14px;-->
<!--  padding: 8px 16px;-->
<!--}-->
<!--</style>-->








<template>
  <van-sticky>
    <van-nav-bar
        :title="title"
        left-arrow
        @click-left="onClickLeft"
        @click-right="showUserDetail(userId)"
    >
      <template #right>
        <van-icon class-prefix="my-icon" name="qita" color="#39a9ed"/>
      </template>
    </van-nav-bar>
  </van-sticky>
  <div class="chat-container">
    <div class="content" ref="chatRoom" v-html="stats.content"></div>
    <van-cell-group inset class="input-area">
      <van-field
          v-model="stats.text"
          center
          clearable
          placeholder="聊点什么吧...."
      >
        <template #button>
          <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>
        </template>
      </van-field>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import myAxios from "../plugins/myAxios";
import { Toast } from "vant";
import { getCurrentUser } from "../services/user";

const user = ref();
const router = useRouter();
const DEFAULT_TITLE = "聊天";
const title = ref(DEFAULT_TITLE);
const stats = ref({ content: '', text: '' });
const userId = ref(''); // 假设你有用户ID


// 显示用户信息
const showUserDetail = (id) => {
  router.push({
    path: "/user/detail",
    query: {
      id: id
    }
  })
}
const showUser = (id) => {
  router.push({
    path: '/user/detail',
    query: {
      id: id
    }
  })
}

onMounted(async () => {
  user.value = await getCurrentUser();
});

const onClickLeft = () => {
  router.push("/");
};

const send = () => {
  // 发送消息的逻辑
  Toast.success('消息已发送');
  stats.value.content += `<p>${stats.value.text}</p>`;
  stats.value.text = '';
};

/**
 * 这个方法是用来将json的聊天消息数据转换成 html的。
 */
const createContent = (remoteUser, nowUser, text, isAdmin, createTime) => {
  // 当前用户消息
  let html;
  if (nowUser) {
    // nowUser 表示是否显示当前用户发送的聊天消息，绿色气泡
    html = `
    <div class="message self">
    <div class="myInfo info">
      <img :alt=${nowUser.username} class="avatar" onclick="showUser(${nowUser.id})" src=${nowUser.avatarUrl}>
    </div>
      <p class="text">${text}</p>
    </div>
`
  } else if (remoteUser) {
    // remoteUser表示远程用户聊天消息，灰色的气泡
    html = `
     <div class="message other">
      <img :alt=${remoteUser.username} class="avatar" onclick="showUser(${remoteUser.id})" src=${remoteUser.avatarUrl}>
    <div class="info">
      <span class="username">${remoteUser.username.length < 10 ? remoteUser.username : remoteUser.username}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${createTime}</span>
      <p class="${isAdmin ? 'admin text' : 'text'}" >${text}</p>
    </div>
    </div>
`
  }
  stats.value.content += html;
}
window.showUser = showUser
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使聊天容器占据整个视口高度 */
  background-color: #f5f5f5; /* 背景颜色 */
  padding-top: 56px; /* 确保内容从导航栏下方开始 */
  /*padding: 0; !* 移除内边距 *!*/
}

.content {
  flex: 1;
  overflow-y: auto; /* 确保聊天内容可以滚动 */
  padding: 16px;
  background-color: #f5f5f5; /* 背景色 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.content p {
  margin: 8px 0;
  padding: 8px;
  background-color: #fff;
  border-radius: 8px;
  max-width: 70%; /* 控制消息宽度 */
  word-break: break-word;
}

.content p.user-message {
  background-color: #dcf8c6; /* 用户消息背景色 */
  align-self: flex-end; /* 用户消息靠右对齐 */
}

.input-area {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff; /* 输入框背景色 */
  z-index: 10; /* 确保输入框在最上方 */
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.van-field__control {
  padding: 8px;
  border-radius: 8px;
  background-color: #f5f5f5;
  color: #333;
  font-size: 16px;
}

.van-button--primary {
  background-color: #1989fa;
  border-color: #1989fa;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 16px;
}
.message {
  display: flex;
  align-items: center;
  margin: 10px 10px;
}

.avatar {
  align-self: flex-start;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
  margin-left: 10px;
}

.username {
  align-self: flex-start;
  text-align: center;
  max-width: 200px;
  font-size: 12px;
  color: #999;
  margin-top: -20px;
  padding-bottom: 2px;
  white-space: nowrap;
  overflow: visible;
  background-color: #fff;
}

</style>